<template>
   <div>
	   <div class="my-2">
		   <Button type="success" @click="add">添加文章</Button>
	   </div>
	   <Table border :columns="columns12" :data="articleList">
	       <template slot-scope="{ row }" slot="name">
	           <strong>{{ row.name }}</strong>
	       </template>
	       <template slot-scope="{ row, index }" slot="action">
	           <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">修改</Button>
			   <Poptip
				   confirm
				   placement="left"
				   title="是否删除?"
				   @on-ok="dels(row)">
				  <Button type="error" size="small" >删除</Button>
			   </Poptip>
	           
	       </template>
	   </Table>
	   <!-- 对话框 -->
	    <Modal
		   v-model="showModel"
		   title="文章操作"
		   @on-ok="isOk"
		   @on-cancel="cancel">
		  <Form :model="formData" label-position="left" :label-width="100">
			  <FormItem label="标题">
				  <Input v-model="formData.title"></Input>
			  </FormItem>
			  <FormItem label="内容">
				  <Input v-model="formData.center" type="textarea" :autosize="{minRows: 2,maxRows: 10}"></Input>
			  </FormItem>
		  </Form>
	   </Modal>
	   <div class="mt-5 w_100 flex justify-center">
	   	 <Page :total="total" show-sizer @on-change="getData" @on-page-size-change="getList"
	   	 :page-size-opts="[2, 5, 10]"/>
	   </div>
   </div>
</template>
<script>
	import {add,list,detail,update,del} from '../api/article.js'
    export default {
        data () {
            return {
                columns12: [
					{
						type: 'index',
						width: 60,
						align: 'center'
					},
                    {
                        title: 'id',
                        key:"id",
						width:150,
						tooltip:true
                    },
					{
					    title: '作者',
					    key: 'users',
						render:(h,p)=>{
							return h('span',{},p.row.users[0].loginName)
						}
					},
                    {
                        title: '标题',
                        key: 'title'
                    },
                    {
                        title: '内容',
                        key: 'center',
						tooltip:true
                    },
					{
					    title: '发布时间',
					    key: 'createTime',
						render:(h,p)=>{
							return h('span',{},this.dateFilter(p.row.createTime))
						}
					},
					{
					    title: '阅读数量',
					    key: 'readingNum',
						render:(h,p)=>{
							if(p.row.readingNum == '' || p.row.readingNum == null){
								return h('span',{},0)
							}else{
								return h('span',{},p.row.readingNum)
							}
						}
					},
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                articleList:[],//文章数据
				showModel:false,//显示对话框
				isEdit:false,
				total:1,
				limit:10,
				editData:{},
				formData:{
					title:"",
					center:"",
				},
            }
        },
		created() {
			this.getData()
		},
        methods: {
			async getData(num){
				let par = new URLSearchParams()
				par.append("pageNum",num?num:1)
				par.append("limit",this.limit)
				let res = await list(par)
				this.articleList = res.data.data.list
				this.total = res.data.data.count
				console.log(res)
			},
			async getList(num){
				this.limit = num;
				this.getData()
			},
			dateFilter(date) {//过滤时间
			  var result = this.moment(date).format('YYYY-MM-DD HH:mm')
			  return result
			},
			add(){
				this.showModel = true
				this.isEdit = false;
			},
			async isOk(){ //确定
				let params = new URLSearchParams()
				params.append("title",this.formData.title)
				params.append("center",this.formData.center)
				let res ;
				if(this.isEdit){
					params.append("id",this.editData.id)
					res = await update(params)
				}else{
					res = await add(params)
				}
				this.$Message.success("操作成功")
				this.getData()
			},
			cancel(){ //取消
				this.showModel = false
			},
			async dels(row){
				let params = new URLSearchParams();
				params.append("id",row.id)
				let res = await del(params)
				if(res.data.code==200){
					this.$Message.success("删除成功")
				}else{
					this.$Message.error("删除失败")
				}
				this.getData();
			},
            show (row) {
				this.formData.title = row.title
				this.formData.center = row.center
                this.showModel = true
				this.isEdit = true //设置为修改状态
				this.editData = row
            },
            remove (index) {
                
            }
        }
    }
</script>
